{extend name="$_admin_base_layout" /}

{block name="plugins-css"}
<link href="__LIBS__/jstree/themes/default/style.min.css" rel="stylesheet" />
{/block}

{block name="content"} 
<style type="text/css">
.center{text-align: center!important;}
.panel{
    width:100%;background-color: #fff;padding:15px 20px;display: inline-block;vertical-align: top;
}
.panel-title{
    border-left:4px solid #ff6c9d;padding-left: 10px;
}
.card{
    width:150px;height:90px;color:#fff;display: inline-block;margin:20px 30px;border-radius: 3px;vertical-align: top;
    padding-top:10px;
}
.card div{font-size: 13px;}
.card-data{font-size: 32px!important;font-weight:300;}
.card-purple{
    background: linear-gradient(to right,#9C58C8,50%,#CB96D6);
}
.card-blue{
    background: linear-gradient(to right,#3AA6D9,50%,#63BACB);
}
.card-yellow{
    background: linear-gradient(to right,#F0A622,50%,#EBBB2A);
}
.card-pink{
    background: linear-gradient(to right,#FD438F,50%,#FE6983);
}
.card-green{
    background: linear-gradient(to right,#7BC69F,50%,#07C160);
}
.card a{
    color:#fff;
}
.panel table{
    height: 300px;overflow-y: scroll;width:80%;margin-top:15px;border:1px solid #f5f5f5;
}
.panel table td,.panel table th{
    padding:7px 10px;vertical-align: top;
} 
 
.tips{
    color:#999;font-size: 12px;padding-left: 20px
}
.small{
    font-size: 11px; 
}
</style> 
<div class="panel">
    <div class="panel-title">数据统计</div>
    <div class="panel-abody center">
        <div class="card card-blue"> 
            <div class="card-data">{$user_total}<span class="small">人</span></div>
            <div>用户总数</div>
        </div>
        <div class="card card-purple"> 
            <div class="card-data">{$t_total}<span class="small">人</span></div> 
            <div>技师总数</div>
        </div>
        <div class="card card-yellow">
            <a href="/admin.php/web/technician/index.html?_filter=check_status&_filter_content=0&_field_display=check_status" target="_self">
                <div class="card-data">{$t_total1}<span class="small">人</span></div> 
                <div>待审核技师</div>
            </a>
        </div>
        <div class="card card-pink"> 
            <div class="card-data">{$s_total}</div> 
            <div>入住店铺</div>
        </div>
        <div class="card card-green"> 
            <a href="/admin.php/web/shop/index.html?_filter=check_status&_filter_content=0&_field_display=check_status" target="_self">
                <div class="card-data">{$s_total1}</div> 
                <div>待审核店铺</div>
            </a>
        </div>
    </div>
</div>   
<!-- <div class="panel">
    <div class="panel-title">近30天趋势<span class="tips"></span></div>
    <div class="panel-abody center">
          <div id="main" style="width:100%;height:320px;"></div>
    </div>
</div> 
 -->



{/block}
{block name="script"}  
<script src="__LIBS__/echarts/echarts.js?v={:config('asset_version')}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main')); 

    // 指定图表的配置项和数据
    var option = option = {
    tooltip: { 
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    // toolbox: {
    //     feature: {
    //         dataView: {show: true, readOnly: false},
    //         magicType: {show: true, type: ['line', 'bar']},
    //         restore: {show: true},
    //         saveAsImage: {show: true}
    //     }
    // },
    legend: {
        data: ['用户总数', '交易金额', '订单数量'] 
    },
    xAxis: [
        {
            type: 'category',
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '数量',
            min: 0,  
            splitLine:{
                show:false
            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '金额',
            min: 0, 
            splitLine:{
                show:false
            },
            axisLabel: {
                formatter: '{value}元',
              
            }
        }
    ],
    series: [
        {
            name: '用户数',
            type: 'line',
            yAxisIndex: 1,
            data: [1,2,3,4,5,6,7,6,3,2,3,6,7,8,9,9,2,3,2,3,3,5,6,2],
            itemStyle:{
                normal:{
                    lineStyle:{
                        width:4
                    }
                }
            }
            
        },
        {
            name: '订单金额',
            type: 'bar',
            data:[1,2,3,4,5,6,7,6,3,2,3,6,7,8,9,9,2,3,2,3,3,5,6,2]
        }, 
        {
            name: '订单数',
            type: 'line',
            yAxisIndex: 1,
            data:[1,2,3,4,5,6,7,6,3,2,3,6,7,8,9,9,2,3,2,3,3,5,6,2],
             itemStyle:{
                normal:{
                    lineStyle:{
                        width:4
                    }
                }
            }
            
        }
    ]
};  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
{/block}


